<script setup>
import {ref} from 'vue';

const selectedKey = ref(1);
const selectCard = ref('inlineGoods');

const data = ref([{
  title: '一级1',
  id: 1,
  checked: true,
  children:
      [
        {
          title: '二级1-1',
          id: 3,
          href: 'https://www.layui.com/',
          children: [{
            title: '三级1-1-3',
            id: 23,
            children: [{
              title: '四级1-1-3-1',
              id: 24,
              children: [{
                title: '五级1-1-3-1-1-1-1-1-1-1-1-',
                id: 30,
                field: ''
              },
                {
                  title: '五级1-1-3-1-2',
                  id: 31,
                }]
            }]
          },
            {
              title: '三级1-1-1',
              id: 7,
              children: [{
                title: '四级1-1-1-1',
                id: 15,
                href: 'https://www.layui.com/doc/'
              }]
            },
            {
              title: '三级1-1-2',
              id: 8,
              children: [{
                title: '四级1-1-2-1',
                id: 32,
              }]
            }]
        },
        {
          title: '二级1-2',
          id: 4,
          children: [{
            title: '三级1-2-1',
            id: 9,
            disabled: true,
            children: [{
              title: '三级1-2-1-1',
              id: 91,
              disabled: true
            }]
          },
            {
              title: '三级1-2-2',
              id: 10,
            }]
        },
        {
          title: '二级1-3',
          id: 20,
          children: [{
            title: '三级1-3-1',
            id: 21,
          },
            {
              title: '三级1-3-2',
              id: 22,
            }]
        }]
},
  {
    title: '一级2',
    id: 2,
    children: [{
      title: '二级2-1',
      id: 5,
      spread: true,
      children: [{
        title: '三级2-1-1',
        id: 11,
      },
        {
          title: '三级2-1-2',
          id: 12,
        }]
    },
      {
        title: '二级2-2',
        id: 6,
        children: [{
          title: '三级2-2-1',
          id: 13,
        },
          {
            title: '三级2-2-2',
            id: 14,
            disabled: true
          }]
      }]
  }
  ,
  {
    title: '一级2',
    id: 2,
    children: [{
      title: '二级2-1',
      id: 5,
      spread: true,
      children: [{
        title: '三级2-1-1',
        id: 11,
      },
        {
          title: '三级2-1-2',
          id: 12,
        }]
    },
      {
        title: '二级2-2',
        id: 6,
        children: [{
          title: '三级2-2-1',
          id: 13,
        },
          {
            title: '三级2-2-2',
            id: 14,
            disabled: true
          }]
      }]
  }

]);

function handleClick(node) {
  console.log("Click Node:" + JSON.stringify(node));
}


</script>

<template>
  <div class="manageListModuleWarp">
    <div class="selectLv1">
      <div class="selectCardWarp">
        <div class="selectCard">
          <el-radio-group v-model="selectCard" size="large">
            <el-radio-button label="在线物料" value="inlineGoods"/>
            <el-radio-button label="本地管理" value="localManage"/>
          </el-radio-group>

        </div>
      </div>
    </div>
    <div class="selectLv2">
      <el-scrollbar height="100%" style="width: 209px">
        <lay-tree
            :data="data"
            :tail-node-icon="false"
            :onlyIconControl="true"
            :default-expand-all="true"
            v-model:selectedKey="selectedKey"
            @node-click="handleClick"
        >
        </lay-tree>
      </el-scrollbar>

    </div>


  </div>

</template>

<style scoped lang="scss">
.manageListModuleWarp {
  width: 220px;
  height: 100%;
  border-right: #CCCCCC 1px solid;
  box-sizing: border-box;
  padding-right: 5px;
  padding-left: 5px;
  display: flex;
  flex-direction: column;

  .selectLv1 {


    .selectCardWarp {
      height: 30px;

      .selectCard {
        width: 100%;


        :deep(.el-radio-group) {
          flex-wrap: nowrap;
        }

        :deep( .el-radio-button__inner) {
          color: #242424;
          height: 30px;
          display: flex;

          justify-content: center;
          align-items: center;
          font-size: 16px;
          border-color: #CCCCCC;
        }
      }

    }


  }

  .selectLv2 {
    flex: 1;
    overflow: hidden;

  }


}


</style>